<template>
  <div id="detail">
    <toast message="message"></toast>
    <detail-nav-bar class="detail-nav-bar" ref="detailNavBar" @centerClick="centerClick"/>
    <scroll class="detail-scroll" ref="detailscroll"
            @scroll="detailChengScroll"
            :probeType="3">
      <detail-swiper id="detail-swiper" :topImages="topImages"/>
      <detail-base-info :goods="goods"/>
      <detail-shop-info :shop="shop"/>
      <detail-goods-info :detailInfo="detailInfo"/>
      <detail-param-info id="detail-param-info" :paramInfo="paramInfo"/>
      <detail-comment-info id="detail-comment-info" :commentInfo="commentInfo"/>
      <goods-list id="detail-goods-list" :goods="recommends"/>
    </scroll>
    <detail-bottom-bar @addToCart="addToCart"/>
    <back-top v-show="isBackTopShow" @click.native="backTopClick"/>
  </div>
</template>

<script>
  import DetailNavBar from "./childComps/DetailNavBar";
  import DetailSwiper from "./childComps/DetailSwiper";
  import DetailBaseInfo from "./childComps/DetailBaseInfo";
  import DetailShopInfo from "./childComps/DetailShopInfo";
  import DetailGoodsInfo from "./childComps/DetailGoodsInfo";
  import DetailParamInfo from "./childComps/DetailParamInfo";
  import DetailCommentInfo from "./childComps/DetailCommentInfo";
  import DetailBottomBar from "./childComps/DetailBottomBar";

  import BackTop from "components/common/backTop/BackTop";
  import Scroll from "components/common/scroll/Scroll"
  import Toast from "components/common/toast/Toast"

  import GoodsList from "components/content/goods/GoodsList";

  import {debounce} from "common/utils"
  import {backTop} from "common/mixin";

  import {getDetailManyData, Goods, Shop, GoodsParam, getReCommends} from "network/detail"
  import {mapActions} from 'vuex'


  export default {
    name: "Detail",
    components: {
      DetailBottomBar,
      GoodsList,
      DetailCommentInfo,
      DetailParamInfo, DetailGoodsInfo, Scroll, DetailBaseInfo, DetailSwiper, DetailNavBar, DetailShopInfo, BackTop,
      Toast
    },
    data() {
      return {
        iid: 0,
        topImages: null,
        goods: {},
        shop: {},
        detailInfo: {},
        paramInfo: {},
        commentInfo: {},
        recommends: []
      }
    },
    created() {

      this.iid = this.$route.params.iid

      getDetailManyData(this.iid).then(res => {
        const data = res.result;

        //获取轮播图信息
        this.topImages = data.itemInfo.topImages;

        //获取商品信息
        this.goods = new Goods(data.itemInfo, data.columns, data.shopInfo.services);

        //获取商品信息
        this.shop = new Shop(data.shopInfo);
        console.log("详情页图片数量" + this.topImages.length);

        //商品详情信息数据
        this.detailInfo = data.detailInfo;

        //获取参数信息
        this.paramInfo = new GoodsParam(data.itemParams.info, data.itemParams.rule);

        //获取评价信息
        if (data.rate.cRate !== 0) this.commentInfo = data.rate.list[0];

      })

      //请求推荐数据
      getReCommends().then(res => {
        /*console.log(res);*/
        this.recommends = res.data.list;
      })

    },
    mounted() {
      //监听推荐数据图片的加载完成
      const refresh = debounce(this.$refs.detailscroll.refresh);
      this.$bus.$on("detailimgLoaded", () => {
        //进行防抖
        refresh();
      });
    },
    methods: {
      ...mapActions({
        addCart: 'addToCart'
      }),
      centerClick(index) {
        //点击顶部 滚动到相对应的位置
        switch (index) {
          case 0:
            this.$refs.detailscroll.scrollToElement(document.querySelector("#detail-swiper"));
            break;
          case 1:
            this.$refs.detailscroll.scrollToElement(document.querySelector("#detail-param-info"));
            break;
          case 2:
            this.$refs.detailscroll.scrollToElement(document.querySelector("#detail-comment-info"));
            break;
          case 3:
            this.$refs.detailscroll.scrollToElement(document.querySelector("#detail-goods-list"));
            break;
        }
      },
      detailChengScroll(position) {
        //滚动时修改相对应的顶部选中状态
        const scrollY = (-position.y);
        if (document.querySelector("#detail-param-info") && scrollY < document.querySelector("#detail-param-info").offsetTop) {
          this.$refs.detailNavBar.activeTitleIndex = 0;
        }
        if (document.querySelector("#detail-param-info") && scrollY >= document.querySelector("#detail-param-info").offsetTop) {
          this.$refs.detailNavBar.activeTitleIndex = 1;
        }
        if (document.querySelector("#detail-comment-info") && scrollY >= document.querySelector("#detail-comment-info").offsetTop) {
          this.$refs.detailNavBar.activeTitleIndex = 2;
        }
        if (document.querySelector("#detail-goods-list") && scrollY >= document.querySelector("#detail-goods-list").offsetTop) {
          this.$refs.detailNavBar.activeTitleIndex = 3;
        }

        /*listenShowBackTop 在混入文件mixin的backTop中*/
        this.listenShowBackTop(position);
      },
      addToCart() {
        const product = {}
        product.iid = this.iid;
        product.imgURL = this.topImages[0];
        product.newPrice = this.goods.nowPrice;
        product.title = this.goods.title;
        product.desc = this.goods.desc;
        product.count = 1;
        this.addCart(product).then(res => {
          this.$toast.show(res, 1000)
        });
      }
    },
    mixins: [backTop]
  }
</script>

<style scoped>
  #detail {
    position: absolute;
    z-index: 10000;
    background: #fff;
    height: 100vh;
  }

  .detail-scroll {
    height: calc(100% - var(--tabbar-height) * 2);
    overflow: hidden;
  }

</style>
